<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/layui-v2.4.5/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="assets/layui-v2.4.5/layui/layui.js"></script>
    <style type="text/css">
        .x-iframe{
            width: 100%;
            height: 100%;
        }
        .layui-tab-item{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-bg-black layui-header">
        <div class="layui-logo">fortune-cat 网关后台管理</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"><span th:text="${user}"></span></a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li style="display: none" class="layui-nav-item" id="welcome"><a _href="./home.html"><cite>welcome</cite></a></li>
                <li class="layui-nav-item"><a _href="./route.html"><cite>路由配置管理</cite></a></li>
                <li class="layui-nav-item"><a _href="./Home.html"><cite>手动降级配置</cite></a></li>
                <li class="layui-nav-item"><a _href="./login.html"><cite>限流配置</cite></a></li>
                <li class="layui-nav-item"><a _href="./test_1.html"><cite>动态filter配置</cite></a></li>
                <li class="layui-nav-item"><a _href="./formCheck.html"><cite>验签算法配置</cite></a></li>
                <li class="layui-nav-item"><a _href="./栅格.html"><cite>token校验配置</cite></a></li>
                <li class="layui-nav-item"><a _href="./栅格.html"><cite>系统设置</cite></a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab tab" lay-filter="mainTab" lay-allowclose="false" style="height: 100%;">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content" style="height: 100%;">
                <!--<div class="layui-tab-item layui-show" style="height: 100%;">-->
                    <!--<iframe src='./home.html' frameborder="0" scrolling="yes" class="x-iframe"></iframe>-->
                <!--</div>-->
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © fortune-cat - Unified gateway
    </div>
</div>
</body>
</html>

<script type="text/javascript">

    $(function(){
        //JavaScript代码区域
        layui.use('element', function(){
            var element = layui.element;


            $(".layui-nav-tree li").click(function(event){
                var url = $(this).children('a').attr('_href');
                var title = $(this).find('cite').html();
                var index  = $('.layui-nav-tree li').index($(this));
                //遍历打开的窗口，如果当前点击的选项已经打开，则跳转到对应窗口去，不再执行for外面的两条语句，创建新窗口
                for (var i = 0; i <$('.x-iframe').length; i++) {
                    if($('.x-iframe').eq(i).attr('tab-id')==index+1){
                        tab.tabChange(index+1);
                        event.stopPropagation();
                        return;
                    }
                };
                tab.tabAdd(title,url,index+1);
                tab.tabChange(index+1);
            });


            //点击新增子页面
            var tab = {
                tabAdd:function(title,url,id){
                    element.tabAdd('mainTab',{
                        title: title,//用于演示
                        content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>',
                        id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                },
                tabDelete:function(othis){
                    element.tabDelete('mainTab',id);
                    othis.addClass('layui-btn-disabled');
                },
                tabChange:function(id){
                    //切换到指定Tab项
                    element.tabChange('mainTab', id); //切换到：用户管理
                }
            };
            $("#welcome").click();
        });

    })

</script>
